<template>
  <el-dialog
    :title="title"
    :close-on-click-modal="false"
    :visible.sync="visible"
    append-to-body
    :before-close="handleClose"
  >
    <div style="text-align: center">
      <el-row>
        <el-col :span="12">
          <div style="margin: 10px 0">
            用户：
            <el-select
              v-model="userId"
              clearable
              filterable
              placeholder="请输入"
              remote
              :remote-method="getUser"
              @change="pickingUser($event)"
              class="width185"
            >
              <el-option
                v-for="item in uList"
                :label="item.nickname"
                :key="item.nickname"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </div>
        </el-col>
        <el-col :span="12">
          <div style="margin: 10px 0">
            卡券：
            <el-select
              v-model="cardId"
              clearable
              filterable
              placeholder="请输入"
              remote
              :remote-method="getCard"
              @change="pickingCard($event)"
              class="width185"
            >
              <el-option
                v-for="item in cList"
                :label="item.name"
                :key="item.id"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </div>
        </el-col>
      </el-row>

      <el-table
        :data="userList"
        border
        ref="selectTable"
        @selection-change="selectionUserListChangeHandle"
        style="width: 100%"
      >
        <el-table-column
          type="selection"
          header-align="center"
          align="center"
          width="50"
        >
        </el-table-column>
        <el-table-column
          prop="nickname"
          header-align="center"
          align="center"
          label="用户"
        >
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          label="操作"
        >
          <template slot-scope="scope">
            <el-button @click="remakeClick(scope.row)" type="danger" round size="mini">移除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div style="margin-top: 10px">
        <el-button
          @click="subimltBtn"
          style="width: 120px"
          size="medium"
          type="primary"
        >确认
        </el-button
        >
      </div>
    </div>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      title: "发放卡券",
      userListSelections: [],
      cardListSelections: [],
      userList: [],
      cardList: [],
      cardmultipleSelection: [],
      uList: [],
      cList: [],
      userId: "",
      cardId: null,
    };
  },
  methods: {
    init() {
      this.visible = true;
    },
    // 多选
    selectionUserListChangeHandle(val) {
      this.userListSelections = val;

    },
    // 多选
    selectionCardListChangeHandle(val) {
      this.cardListSelections = val;
    },
    //关闭
    handleClose(done) {
      this.cardList = []
      this.userList = []
      this.cardmultipleSelection = []
      this.cardId = null
      this.userId = ''
      done()
    },
    remakeClick(val) {
      console.log(val)
      this.userList.map((item, i) => {
        if (item.nickname == val.nickname) {
          this.userList.splice(i, 1)
        }
      })
    },
    subimltBtn(val) {
      let selecarid = this.$refs.selectTable.store.states.selection;
      if (selecarid.length == 0) {
        this.$message({
          message: "请选择用户",
          type: "warning",
        });
        return;
      }
      if (this.cardId == null) {
        this.$message({
          message: "请选择卡券",
          type: "warning",
        });
        return;
      }

      selecarid.map((item) => {
        this.cardmultipleSelection.push(item.id);
      });

      let data = {
        cardId: this.cardId,
        userId: this.cardmultipleSelection,
      };
      this.$http({
        url: `/mall/usercard/cardAssingn`,
        method: "post",
        data: data,
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.$message({
            message: "操作成功",
            type: "success",
            duration: 1500,
          });
          this.visible = false
          this.handleClose()
        }
      });

    },
    pickingUser(e) {
      let obj = this.uList.find((item) => {
        return item.id === e;
      });
      console.log(obj);
      if (obj) {
        this.userList.push(obj);
      }
      console.log(this.userList);
    },
    pickingCard(e) {
      let obj = this.cList.find((item) => {
        return item.id === e;
      });
      console.log(this.cardId);
      // if(obj){
      //   this.cardList=[obj]
      // }
    },
    // 远程搜索
    getUser(query) {
      if (query !== "") {
        let that = this;
        setTimeout(() => {
          that
            .$http({
              url: "/mall/user/queryAllSimple",
              method: "get",
              params: {
                keyword: query,
              },
            })
            .then(({data}) => {
              if (data && data.code === 0) {
                that.uList = data.list;
              }
            });
        }, 200);
      } else {
        this.uList = [];
      }
    },
    // 远程搜索
    getCard(query) {
      if (query !== "") {
        let that = this;
        setTimeout(() => {
          that
            .$http({
              url: "/mall/card/queryAllSimple",
              method: "get",
              params: {
                name: query,
              },
            })
            .then(({data}) => {
              if (data && data.code === 0) {
                that.cList = data.list;
              }
            });
        }, 200);
      } else {
        this.cList = [];
      }
    },
  },
};
</script>
